<template>
    <div class="add-lxr-dialog">
        <!-- 添加联系人 -->
        <appdialog ref="dialog"
                  :visible="false"
                  title="报警联系人"
                  @confirm="confirmAdd"
                  @cancle="cancleAdd"
                  width="35%">

        <el-form ref="addForm"
				:rules="rules"                  
                :model="addForm"
                label-width="100px">

        <el-form-item label="姓名：" prop="linkName">
         <nameInput @change="changeName"
				    :defaultValue="addForm.linkName"
                    ref="lxrName"
                    > </nameInput>
            </el-form-item>

        <el-form-item label="手机号码：" prop="mobile">
         <nameInput @change="changePhone"
				    :defaultValue="addForm.mobile"
                    ref="lxrPhone"
         > </nameInput>
            </el-form-item>

             <el-form-item label="邮箱：" prop="email">
         <nameInput @change="changeEmail"
				    :defaultValue="addForm.email"
                    ref="lxrEmail"
         > </nameInput>
            </el-form-item>
            <el-row>
                <el-col :span="12">
             <el-form-item label="邮箱验证码：" prop="checkCode">
                <nameInput @change="changeCheckCode"
                           ref="code"> </nameInput>
            </el-form-item>
                </el-col>
                <el-col :span="8">
             <el-form-item >
                  <el-button type="primary" :plain="true"  @click="handleCode" :disabled="disabled">
                    <span>{{btntext}}</span>
                </el-button>
            </el-form-item>
                </el-col>
            </el-row>
       </el-form>
     </appdialog>
    </div>
</template>
<script>
import { setTimeout } from 'timers';
import appdialog from "@/view/components/dialog/dialog";
import nameInput from "@/view/components/input/nameInput";
import { saveAlarmContactMan, sendCheckCode } from "@/service/swagger/AlarmController"

let timer = null
export default {
    name: "addlxrDialog",
    components: {
        appdialog,
        nameInput
    },
    data() {
        return {
            disabled: false,
            btntext: "获取验证码",
            addForm: {
                linkName: "",
                mobile: "",
                email: "",
            },
            rules: {
                linkName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                mobile: [{
                    required: true,
                    trigger: 'blur',
                    validator: (rule, value, callback) => {
                        let reg = new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/)
                        if (!value) {
                            callback('请输入电话号码')
                        } else if (!value.match(reg)) {
                            callback('请输入正确的电话号码')
                        } else {
                            callback()
                        }
                    }                }],
                email: [
                    { required: true, message: '请输入电子邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱!', trigger: ['blur', 'change'] }
                ]
            }
        }
    },
    methods: {
        init(data) {
            this.addForm = data || {
                linkName: "",
                mobile: "",
                email: ""
            };
            for (let i in this.$refs) {
                if (this.$refs[i].reset) {
                    this.$refs[i].reset();
                }
            }
            return this;
        },
        open() {
            this.$refs.dialog.open();
        },
        confirmAdd() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    this.submitAdd()
                } else {
                    setTimeout(() => {
                        this.open()
                    }, 50)
                    return false
                }
            })
        },
        submitAdd() {
            saveAlarmContactMan({ ...this.addForm }).then(ret => {
                if (!ret.code) {
                    this.$refs.dialog.close();
                    this.$emit("addSucess")
                    this.$refs.lxrName.reset()
                    this.$refs.lxrPhone.reset()
                    this.$refs.lxrEmail.reset()
                    this.$refs.code.reset()
                    this.$refs.addForm.clearValidate(['linkName', 'mobile', 'email', 'checkCode'])
                }else{
                    this.$refs.dialog.close();
                    
                }



            })
        },
        cancleAdd() {

        },
        changeName(name, v) {
            console.log("环境选项改变：", name, v)
            this.addForm.linkName = v;
        },
        changePhone(name, v) {
            this.addForm.mobile = v;
        },
        changeEmail(name, v) {
            this.addForm.email = v;
        },
        changeCheckCode(name, v) {
            this.addForm.checkCode = v
        },
        handleCode() {
            this.disabled = true
            let count = 30
            timer = setInterval(() => {
                count--
                this.btntext = `${count}s后重发`
                if (count == 0) {
                    this.disabled = false
                    this.btntext ='获取验证码'
                    clearInterval(timer)
                }
            }, 1000)
            let params = {
                mailAddress: this.addForm.email
            }
            sendCheckCode(params).then(ret => {
                if (ret.code === 0) {
                    this.btntext = '获取验证码'
                    // this.disabled = false
                    // clearInterval(timer)
                    this.$message({
                        message: '验证码已发至您的邮箱,三分钟有效!',
                        type: 'success'                    })
                } else {
                    // this.btntext = '重新发送'
                    this.disabled = false
                    clearInterval(timer)
                    this.$message.error('验证码发送失败!')
                }
            })
        },

    }
}
</script>

<style scoped lang="scss">
@import "../../../styles/variables.scss";
</style>

